<template>
  <div style="display:flex;">
    <div style="flex:0 1 25%;padding: 5px;">
        <dv-border-box-10 style="width:100%;height:215px;">
        </dv-border-box-10>
    </div>
    <div style="flex:0 1 50%;padding: 5px;">
        <dv-border-box-1 style="width:100%;height:215px;">
          <LineChartVue :viewData = 'lineViewData' style="width:100%;height:215px;"> </LineChartVue>
        </dv-border-box-1>
    </div>
    <div style="flex:0 1 25%;padding: 5px;">
        <dv-border-box-10 :reverse="true" style="width:100%;height:215px;">
        </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import LineChartVue from '../charts/LineChart.vue'
export default {
  name: 'EchartBottom',
  components: {
    LineChartVue
  },
  data () {
    return {
      lineViewData: {
        date: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        data: [150, 230, 224, 218, 135, 147, 260]
      }
    }
  }
}
</script>
<style scoped>
.module-box {
    width: 100%;
    height: 100%;
    display:flex;
    justify-content: space-between; /*两端对齐*/
    margin:1px;
    background: url('../assets/img/pageBg.png') no-repeat fixed center;
    background-size:100% 100%;
  }
</style>
